import React from 'react';
import Upload, { Avatar } from '..';
import Icon from '../materiels/Icon';
import '../style.css';
import './style.css';
import Cropper from 'react-cropper';
import 'cropperjs/dist/cropper.css';
import { dataURL2File, previewFile } from '../utils';

class App extends React.Component {
    getUploadOptions() {
        // let keyName = '';
        return {
            // action: (file) => new Promise((resolve, reject) => {
            //     fetch('http://172.16.6.235:39001/VV-RESORCE-SERVICE/api/resource/public/oss/producePutPreSignUrls', {
            //         method: 'POST',
            //         body: JSON.stringify({
            //             sysCode: "OA", // OA,
            //             fileNames: [file.name]
            //         }),
            //         headers: {
            //             'Content-Type': 'application/json'
            //         }
            //     }).then(async response => {
            //         const res = await response.json();
            //         if (res.code === 10000) {
            //             // keyName = res.data.data[0].keyName;
            //             resolve(res.data[0].preUrl);
            //         } else {
            //             reject(res);
            //             // resolve('http://localhost:3280/upload');
            //         }
            //     }).catch(err => {
            //         reject(err);
            //     });
            // }),
            // headers: {
            //     'Content-Type': 'application/octet-stream'
            // },
            action: 'http://localhost:3280/upload',
            method: 'PUT',
            multiple: true,
            beforeUpload: file => {
                //
            },
            onProgress: (e, file) => {
                console.log('onProgress::::', e, file);
            },
            onError: (e, response, file) => {
                console.log('onError::::', e, response, file);
            }
        };
    }

    state = {
        cropperBuffer: null,
        selectedFile: null,

        fileList: [
            {
                uid: '00',
                name: 'jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
                url: 'http://www.kreedoo.com/mailTplImages/logo.png',
                type: 'image/png',
                state: 'uploaded'
            },
            {
                uid: '01',
                name: 'abcd.png',
                url: 'http://www.dlslslsl.com/abcd.png',
                state: 'uploaded'
            }
        ]
    };

    cropperBuffer = '';

    saveCropperUploaderRef = ref => {
        this.uploaderRef = ref;
    }

    saveCropperRef = ref => {
        this.cropperRef = ref;
    };

    saveUploaderRef1 = ref => {
        this.uploaderRef1 = ref;
        window.xxx = ref;
    };

    saveUploaderRef2 = ref => {
        this.uploaderRef2 = ref;
        window.shoukong = ref;
    };

    render() {
        const button = (<div className="button">
            <Icon type="upload" />
            {' '}
            Click to Upload
        </div>);
        const titleStyle = {
            marginTop: 20,
            borderTop: '1px solid #efefef',
            paddingTop: 10,
            fontSize: 16,
            marginBottom: 10
        };
        return (
            <div style={{
                padding: 100
            }}>
                <div style={titleStyle}>文本列表</div>
                <Upload
                    {...this.getUploadOptions()}
                    listType="text"
                    ref={this.saveUploaderRef1}
                    // renderListItem={options => {
                    //     console.log(options);
                    //     return <div key={options.key}>{options.key}</div>;
                    // }}
                >
                    <button className="button">
                        <Icon type="plus" />
                        {' '}
                        Upload
                    </button>
                </Upload>
                <Upload
                    {...this.getUploadOptions()}
                >
                    <div className="file-selector-card">
                        <div className="file-selector-card_inner">
                            <Icon type="plus" />
                            <br />
                            Upload
                        </div>
                    </div>
                </Upload>
                <Upload>
                    <div className="file-selector-card">
                        <div className="file-selector-card_inner">
                            <Icon type="clip" />
                            <br />
                            Upload
                        </div>
                    </div>
                </Upload>
                <div style={titleStyle}>非受控</div>
                <div>{JSON.stringify(this.state.fileList.map(item => ({
                    name: item.name,
                    key: item.key
                })))}</div>
                <Upload
                    {...this.getUploadOptions()}
                    ref={this.saveUploaderRef2}
                    listType="image"
                    defaultValue={this.state.fileList}
                >
                    <button className="button">
                        <Icon type="plus" />
                        {' '}
                        Upload
                    </button>
                </Upload>
                <div style={titleStyle}>受控</div>
                <Upload
                    {...this.getUploadOptions()}
                    listType="image"
                    value={this.state.fileList}
                    onChange={fileList => {
                        this.setState({
                            fileList
                        });
                    }}
                >
                    <button className="button">
                        <Icon type="plus" />
                        {' '}
                        Upload
                    </button>
                </Upload>
                <div style={titleStyle}>图文列表</div>
                <Upload
                    {...this.getUploadOptions()}
                    listType="image"
                >
                    <button className="button">
                        <Icon type="plus" />
                        {' '}
                        Upload
                    </button>
                </Upload>
                <div style={titleStyle}>卡片列表</div>
                <Upload
                    {...this.getUploadOptions()}
                    listType="card"
                    isShowedCardName={false}
                    rtl={false}
                >
                    <div className="file-selector-card">
                        <div className="file-selector-card_inner">
                            <Icon type="plus" />
                            <div>Upload</div>
                        </div>
                    </div>
                </Upload>
                <div style={titleStyle}>拖拽上传</div>
                <Upload
                    {...this.getUploadOptions()}
                    draggable
                    multiple
                    listType="text"
                >
                    <div className="file-selector-drag">
                        <div className="file-selector-drag_inner">
                            <Icon type="upload" />
                            <br />
                            Click or drag files to this area to upload.
                        </div>
                    </div>
                </Upload>
                <div style={titleStyle}>单图头像模式：</div>
                <Avatar
                    {...this.getUploadOptions()}
                />
                <div style={titleStyle}>单图头像模式-可预览可以裁剪：</div>
                <Upload
                    {...this.getUploadOptions()}
                    showUploadList={false}
                >
                    {button}
                </Upload>

                <div style={{
                    display: 'none'
                }}>
                    <div style={titleStyle}>Card形式的文件选择器</div>
                    <Upload
                        {...this.getUploadOptions()}
                        // className="file-selector--card"
                        listType="text"
                        limit={2}
                        onTopLimit={({ limit }) => {
                            alert(`超过上限${limit}啦`);
                        }}
                        autoUpload={false}
                        ref={this.saveCropperUploaderRef}
                        onSelect={files => {
                            previewFile(files[0]).then(result => {
                                this.setState({
                                    selectedFile: result
                                });
                            });
                        }}
                    >
                        <div>
                            <Icon type="plus" />
                            <br />
                            <span>Upload</span>
                        </div>
                    </Upload>
                    {this.state.selectedFile ? (<Cropper
                        ref={this.saveCropperRef}
                        src={this.state.selectedFile}
                        style={{ height: 400, width: '100%' }}

                        aspectRatio={16 / 9}
                        guides={false}
                        crop={() => {
                            const dataUrl = this.cropperRef.getCroppedCanvas().toDataURL();
                            this.cropperBuffer = dataUrl;
                        }}
                    />) : null}
                    <button className="button" onClick={() => {
                        this.uploaderRef.startUpload([
                            dataURL2File(this.cropperBuffer, 'zidingyi.png')
                        ]);
                        this.setState({
                            selectedFile: null
                        });
                        this.cropperBuffer = null;
                    }}>确定</button>
                    <div style={titleStyle}>上传前校验：</div>
                    <Upload
                        {...this.getUploadOptions()}
                        showUploadList={false}
                    >
                        {button}
                    </Upload>
                </div>
            </div>
        );
    }
}

export default App;
